<template>
  <div class="root">
    <m-header title="谁拍过我">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content" id="content">
      <div class="list">
        <div class="list-item" v-for="item in visitorList">
          <div class="list-item-left">
            <div class="list-item-left-avatar">
              <img class="avatar" :src="item.avatarUrl ? item.avatarUrl : defaultAvatar" @click="link2InfoPage(item.accountId)" />
            </div>
            <div class="list-item-left-title">
              <div class="name">{{item.nickname}}</div>
              <div class="tag-box">
                <mu-badge class="tag-item-margin" v-for="(tag,index) in item.tagList" :primary="index%2===0" :secondary="index%2===1" :content="tag.content"
                  :key="index" />
              </div>
              <div class="address">{{item.address}}</div>
            </div>
          </div>
          <div class="list-item-right">
            {{dateFormat(item.lastUpdateTime)}}
          </div>
        </div>
      </div>
      <mu-infinite-scroll :scroller="scroller" loadingText="正在加载..." :loading="loading" @load="getMyVisitors(true)" />
      <m-none-data content='还没有人拍过你哦' v-if="visitorList.length === 0" />
    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import mNoneData from '../components/none-data.vue'
  import defaultAvatar from '../assets/images/default_avatar.png'

  export default {
    components: {
      mHeader,
      mNoneData
    },
    data() {
      return {
        defaultAvatar,
        visitorList: [],
        num: 0,
        pageNo: 1,
        loading: false,
        hasMore: true,
        scroller: null
      }
    },
    methods: {
      getMyVisitors(isLoadMore) {
        if (isLoadMore) {
          console.log('LoadMore');
          if (!this.hasMore) return;
          this.pageNo++;
          this.loading = true;
        }
        var _this = this;
        this.$http.get('my/visitors', {
          params: {
            page: _this.pageNo
          }
        }).then(
          function (response) {
            if (response.data.code === '0') {
              //合并数组
              _this.visitorList = _this.visitorList.concat(response.data.data.visitorList);
              _this.num += response.data.data.visitorList.length;

              if (response.data.data.visitorList.length < 10) {
                _this.hasMore = false;
              }
              if (isLoadMore) {
                _this.loading = false;
              }
            }

          }
        ).catch(function (error) {

        });
      },

      dateFormat(timeMill) {

        if (!timeMill) return '';
        // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
        var date = new Date(timeMill);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes();
        // var s = date.getSeconds();
        var dateStr = M + D + h + m; //呀麻碟
        // 输出结果：2014-04-23 18:55:49
        return dateStr;
      },

      link2InfoPage(_accountId) {
        this.$router.push({
          name: 'UserInformation',
          params: {
            accountId: _accountId
          }
        });
      },
    },
    mounted() {
      this.scroller = document.getElementById('content');
      this.getMyVisitors(false);
    }
  }

</script>

<style lang="less">
  /*@import "../assets/less/common.less";*/

  .tag-box {
    max-height: 44px;
    overflow: hidden;
  }

</style>
